<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="模板名称">
              <a-input v-model="queryParam.dto.name" placeholder="" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item label="模板编码">
              <a-input v-model="queryParam.dto.templateCode" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm()">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" icon="plus" v-action:temp:save @click="$refs.formHandle.add()">新建模板</a-button>

      <a-button type="primary" icon="plus" v-action:temp:import @click="$refs.uploadFile.open()">导入模板</a-button>

    </div>
    <s-table
      ref="table"
      size="small"
      bordered
      rowKey="id"
      :columns="columns"
      :data="loadData">
      <span slot="action" slot-scope="text, record">
        <template>
          <a-tag color="orange" v-action:temp:edit @click="handleEdit(record)" >编辑</a-tag>
          <a-tag color="red" v-action:temp:del @click="handleDelete(record)" >删除</a-tag>
          <a-tag color="green" v-action:temp:design @click="design(record)" >开发</a-tag>
          <a-tag color="green" v-action:temp:export @click="exportTemp(record)" >导出</a-tag>
        </template>
      </span>

      <span
        slot="templateDesc"
        slot-scope="text">
        <span v-html="$substr(text,10)"></span>
      </span>

      <span
        slot="isDefault"
        slot-scope="val">
        <a-tag color="green" v-if="val===1">是</a-tag>
        <a-tag color="black" v-else>否</a-tag>
      </span>

      <span
        slot="isShare"
        slot-scope="val">
        <a-tag color="green" v-if="val">是</a-tag>
        <a-tag color="black" v-else>否</a-tag>
      </span>

    </s-table>
    <form-handle ref="formHandle" @ok="handleOk" />
    <design ref="design"></design>
    <upload-file ref="uploadFile" @ok="handleOk" />
  </a-card>
</template>

<script>
  import formHandle from './handle'
  import uploadFile from './uploadFile'
  import {
    page,
    delByPk,
    exportit
  } from '@/api/site/template'
  import {
    STable
  } from '@/components'
  import design from './design.vue'
  export default {
    name: 'Templates',
    components: {
      STable,
      formHandle,
      design,
      uploadFile
    },
    props: {
      statusFilter: {
        type: Function,
        default: undefined
      }
    },
    data () {
      return {
        mdl: {},
        advanced: false,
        queryParam: {
          dto: {}
        },
        columns: [{
            title: '模板名称',
            dataIndex: 'name'
          },
          {
              title: '模板code',
              dataIndex: 'templateCode'
          },
          {
              title: '当前默认',
              dataIndex: 'isDefault',
              scopedSlots: {
                customRender: 'isDefault'
              }
          },
          {
              title: '是否共享',
              dataIndex: 'isShare',
              scopedSlots: {
                customRender: 'isShare'
              }
          },
          {
              title: '模板类型',
              dataIndex: 'typeName'
          },
          {
              title: '模板描述',
              dataIndex: 'templateDesc',
              scopedSlots: {
                customRender: 'templateDesc'
              }
          },
          {
            title: '文件夹路径',
            dataIndex: 'templateFolderPath'
          },
          {
            title: '开发者名称',
            dataIndex: 'developerName'
          },
          {
            title: '联系方式',
            dataIndex: 'developerContact'
          },
          {
            title: '创建时间',
            dataIndex: 'gmtCreate'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '250px',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        loadData: parameter => {
          return page(Object.assign(parameter, this.queryParam)).then(response => {
            return response.res
          })
        }
      }
    },
    created () {
    },
    methods: {
      handleDelete (record) {
        const that = this
        this.$confirm({
          title: '操作提醒',
          content: '确定要删除吗?',
          onOk () {
            delByPk({
              id: record.id
            }).then(response => {
              that.$message.info(response.msg)
              that.$refs.table.refresh()
            }).catch((response) => {
              that.$message.warn(response.msg)
            })
          },
          onCancel () {}
        })
      },
      exportTemp (record) {
          exportit({ tempId: record.id }).then(response => {
            const blob = new Blob([response.data])
            const linkNode = document.createElement('a')
            linkNode.download = response.headers.filename // a标签的download属性规定下载文件的名称
            linkNode.style.display = 'none'
            linkNode.href = URL.createObjectURL(blob) // 生成一个Blob URL
            document.body.appendChild(linkNode)
            linkNode.click() // 模拟在按钮上的一次鼠标单击
            URL.revokeObjectURL(linkNode.href) // 释放URL 对象
            document.body.removeChild(linkNode)
          })
      },
      handleEdit (record) {
        this.$refs.formHandle.edit(record)
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      design (record) {
        this.$refs.design.openDesign(record)
      },
      resetSearchForm () {
        this.queryParam = {
          dto: {}
        }
        this.handleOk()
      }
    }
  }
</script>
